<link rel="stylesheet" href="__CDN__/assets/addons/health/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/health/libs/common.css">
<style>
	#trackingHealthIndex {
		color: #444;
	}

	/*搜索容器STAR*/
	.choose-container {
		margin-bottom: 10px;
	}

	.custom-choose,
	.custom-choose-type,
	.custom-choose-sub {
		height: 50px;
		border-radius: 4px;
		justify-content: space-between;
		padding: 0 20px;
		background: #fff;
	}

	.custom-choose-type,
	.custom-choose-sub {
		justify-content: flex-start;
	}

	.custom-choose-sub {
		height: 70px;
		padding: 0 10px 20px 20px;
	}

	.choose-status-tip {
		margin-right: 12px;
	}

	.custom-choose-type-tip {
		margin-right: 16px;
	}

	.choose-btn {
		width: 80px;
		border: 1px solid #E6E6E6;
		margin-right: 10px;
		height: 30px;
	}

	.choose-btn-active {
		background-color: #7536D0;
		border: none;
		color: #fff;
	}

	/*搜索容器END*/

	/*表格内容*/
	.custom-table {
		padding: 20px 20px 30px;
		background: #fff;
	}

	.custom-table .custom-header {
		justify-content: space-between;
		margin-bottom: 14px;
	}

	/*按钮*/
	.common-btn {
		height: 32px;
		cursor: pointer;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
	}

	.display-flex {
		display: flex;
		align-items: center;
	}

	.summary-box {
		margin-bottom: 14px;
	}
</style>
<script src="__CDN__/assets/addons/health/libs/vue.js"></script>
<script src="__CDN__/assets/addons/health/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/health/libs/moment.js"></script>

<div id="trackingHealthIndex" v-cloak>
	<div class="choose-container">
		<div class="custom-choose display-flex">
			<div class="choose-status">
				<span class="choose-status-tip">筛选条件</span>
				<el-switch @change="isChoose" active-value="1" inactive-value="0" v-model="chooseType"
				           active-color="#7536D0" inactive-color="#E9EBEF">
				</el-switch>
			</div>
			<div class="custom-search">
			</div>
		</div>
		<div v-if="chooseType==1">
			<div class="custom-choose-type display-flex">
				<div class="custom-choose-type-tip">
					筛选日期
				</div>
				<div>
					<el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="created_at"
					                type="daterange" placeholder="选择日期时间">
					</el-date-picker>
				</div>
			</div>
			<div class="custom-choose-sub display-flex">
				<div class="common-btn choose-btn choose-btn-active" style="margin-right: 20px;"
				     @click="operation('filter')">
					筛选
				</div>
				<div class="common-btn choose-btn" @click="operation('clear')">
					清空
				</div>
			</div>
		</div>
	</div>
	<div class="custom-table">
		<div class="custom-header display-flex">
			<div class="display-flex">
				<div class="custom-refresh display-flex-c" @click="getData">
					<i class="el-icon-refresh"></i>
				</div>
			</div>
		</div>
		<div class="custom-table-border">
			<el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border
			          :row-class-name="tableRowClassName" :cell-class-name="tableCellClassName"
			          :header-cell-class-name="tableCellClassName">
				<el-table-column fixed prop="service_name" label="服务名称" min-width="110" align="center">
				</el-table-column>
				<el-table-column fixed prop="total_num" label="总点击" min-width="120" align="center">
				</el-table-column>
				<el-table-column fixed prop="is_use" label="成功打开次数" min-width="120" align="center">
				</el-table-column>
				<el-table-column fixed prop="total_user" label="总点击用户数" min-width="120" align="center">
				</el-table-column>
			</el-table>
		</div>
	</div>
</div>